<!--
 * @Author: wangding
 * @Date: 2020-11-06 16:33:50
 * @LastEditTime: 2020-11-06 16:45:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\overview-inverter\alarm\proposal.vue
-->
<template>
    <div>
        <el-dialog
        :title="$t('Data_synchronization')"
        :visible="visibleShow"
        width="650px"
        @close="()=>{$store.commit('setVisibleShow',false)}"
        >
            <el-form ref="form" :model="form" label-width="200px">
                <el-row :gutter="24">
                    <el-col :span="20">
                        <el-form-item :label="$t('index.timeHorizon')" label-width="150px">
                            <el-date-picker
                                v-model="form.reportStartTime"
                                type="date"
                                :placeholder="$t('index.startTime')"
                                value-format='yyyy-MM-dd'
                                :clearable='false'
                                style="width: 150px;"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                            <span>-</span>
                            <el-date-picker
                                v-model="form.reportEndTime"
                                type="date"
                                :placeholder="$t('index.endTime')"
                                value-format='yyyy-MM-dd'
                                :clearable='false'
                                style="width: 150px;"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setVisibleShow',false)}">{{$t('close')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('Synchronize')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import moment from 'moment'
export default {
    components: {

    },
    props: {

    },
    data() {
        return {
            form:{
                reportStartTime:moment(new Date()).subtract(1,'months').format('YYYY-MM-DD'),
                reportEndTime:moment().format("YYYY-MM-DD"),
            },
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
        };
    },
    computed: {
        visibleShow(){
            return this.$store.state.sysStore.visibleShow
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        
    },
    methods: {
        async devalarmhandlerecordSynData(){
            let res = await this.API.devalarmhandlerecordSynData(this.form)
            if(res.code===0){
                this.$message.success(this.$t('index.control_success'));
            }else if(res.code===1){
                this.$message.warning(this.$t('Data_is_syncing'));
            }else if(res.code===2){
                this.$message.error(this.$t('Program_exception'));
            }
            this.$store.commit('setVisibleShow',false)
            this.$emit('uploadData',true)
        },
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  console.log()
                  let startTime = new Date(this.form.reportStartTime).getTime()
                  let endTime = new Date(this.form.reportEndTime).getTime()
                  console.log(`${endTime}-${startTime}=${endTime-startTime}`,'${endTime}-${startTime}=${endTime-startTime}')
                  if(this.form.reportStartTime==null || this.form.reportEndTime==null){
                      this.$message.error(this.$t('Please_select_the_time_range'));
                  }else if(endTime - startTime >92*24*60*60*1000){
                      this.$message.error(this.$t('Time_range_can_be_up_to_3_months'));
                  }else{
                      this.devalarmhandlerecordSynData()
                  }
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
    },
};
</script>

<style  lang="less" scoped>
.proposal-main-box{
    .big-box{
        line-height: 30px;
        span{
            font-weight: bold;
        }
        p{
            margin: 0;
            color: #6b6b6b;
            line-height: 20px;
            font-size: 13px;
        }
    }
}
</style>
